
import { getTodoList, removeTodo, addTodo } from "./js/Decorator";
import { ITodoData, } from "./js/typing";
import TodoDom from "./TodoDom";

export default class TodoEvent extends TodoDom {
    todoList: ITodoData[]
    constructor(todoList: ITodoData[], todoWrapper: HTMLElement, inputDom: HTMLInputElement) {
        super(todoWrapper, inputDom)
        //? 为了绑定到 app.ts上的todolist的引用
        this.todoList = todoList
        this.init(this.todoList)
    }

    instance(): TodoEvent {
        return this
    }

    test() {
        alert(this.todoList)
    }

    @getTodoList
    init(todoData: ITodoData[]) {
        if (todoData.length > 0) {
            todoData.map(item => {
                this.todoList.push(item)
            })
        }
        this.initDom(todoData)
    }
    // @addTodo
    addTodoEvent(ITodoData: ITodoData) {
        const { content } = ITodoData
        const sameTodoArr = this.todoList.find((item => content === item.content))
        if (sameTodoArr) return alert('内容有重复')
        this.todoList.push(ITodoData)
        this.addDom(ITodoData)
    }

    // @removeTodo
    removeTodoEvent(id: number): void {
        this.todoList = this.todoList.filter(item => item.id !== id)
        this.removeDom(id)
    }

    changeComplete(id: number): void {
        console.log('接收')
        let completeStutas
        this.todoList.forEach(item => {
            if (item.id === id) {
                item.complete = !item.complete
                completeStutas = item.complete
            }
        })
        this.changeCompleteDom(id, completeStutas)
    }
}
